Angular-এ কম্পোনেন্ট ইন্টারঅ্যাকশন হল এক বা একাধিক কম্পোনেন্টের মধ্যে ডেটা শেয়ার বা যোগাযোগ করার প্রক্রিয়া। Angular অ্যাপ্লিকেশনটি সাধারণত অনেকগুলো কম্পোনেন্ট দিয়ে গঠিত হয়, এবং এই কম্পোনেন্টগুলির মধ্যে ডেটা ও ইভেন্ট শেয়ারিং অত্যন্ত গুরুত্বপূর্ণ। কম্পোনেন্ট ইন্টারঅ্যাকশন করার জন্য Angular বিভিন্ন উপায় প্রদান করে।

কম্পোনেন্ট ইন্টারঅ্যাকশনের কিছু সাধারণ পদ্ধতি হলো:

• ইনপুট (Input) ও আউটপুট (Output) প্রপার্টি: প্যারেন্ট ও চাইল্ড কম্পোনেন্টের মধ্যে ডেটা আদান-প্রদান।
• সার্ভিস ব্যবহার: কম্পোনেন্টের মধ্যে ডেটা শেয়ার করার জন্য সার্ভিস ব্যবহার করা।
• ভিউ চাইল্ড (ViewChild): প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টের সাথে যোগাযোগ করা।
• রাউটিং এবং রিজলভার: এক রাউট থেকে অন্য রাউটে ডেটা পাস করা।

১. ইনপুট (Input) এবং আউটপুট (Output) প্রপার্টি

Angular-এ ইনপুট এবং আউটপুট প্রপার্টি ব্যবহার করে প্যারেন্ট এবং চাইল্ড কম্পোনেন্টের মধ্যে ডেটা আদান-প্রদান করা যায়।

ইনপুট (Input) প্রপার্টি:

@Input ডেকোরেটর প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা পাস করার জন্য ব্যবহার করা হয়।

চাইল্ড কম্পোনেন্ট (ChildComponent):

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<h2>{{ childMessage }}</h2>`
})
export class ChildComponent {
  @Input() childMessage: string; // প্যারেন্ট থেকে ডেটা গ্রহণ করা
}

প্যারেন্ট কম্পোনেন্ট (ParentComponent):

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `<app-child [childMessage]="parentMessage"></app-child>`
})
export class ParentComponent {
  parentMessage = 'Hello from Parent Component!'; // চাইল্ড কম্পোনেন্টে পাঠানো ডেটা
}

এখানে, parentMessage প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে childMessage হিসেবে পাঠানো হচ্ছে।

আউটপুট (Output) প্রপার্টি:

@Output ডেকোরেটর চাইল্ড কম্পোনেন্ট থেকে প্যারেন্ট কম্পোনেন্টে ইভেন্ট বা ডেটা পাঠাতে ব্যবহার করা হয়।

চাইল্ড কম্পোনেন্ট (ChildComponent):

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<button (click)="sendMessage()">Send Message to Parent</button>`
})
export class ChildComponent {
  @Output() messageToParent = new EventEmitter<string>(); // প্যারেন্টকে ইভেন্ট পাঠানোর জন্য

  sendMessage() {
    this.messageToParent.emit('Hello from Child Component!'); // প্যারেন্টকে ইভেন্ট পাঠানো
  }
}

প্যারেন্ট কম্পোনেন্ট (ParentComponent):

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `<app-child (messageToParent)="receiveMessage($event)"></app-child>`
})
export class ParentComponent {
  receiveMessage(message: string) {
    console.log(message); // প্যারেন্ট কম্পোনেন্টে চাইল্ড থেকে আসা মেসেজ
  }
}

এখানে, চাইল্ড কম্পোনেন্ট থেকে একটি ইভেন্ট (messageToParent) প্যারেন্ট কম্পোনেন্টে পাঠানো হচ্ছে এবং প্যারেন্ট কম্পোনেন্টে এটি হ্যান্ডল করা হচ্ছে।

২. সার্ভিস ব্যবহার করে কম্পোনেন্ট ইন্টারঅ্যাকশন

কম্পোনেন্টের মধ্যে ডেটা শেয়ার করতে Angular-এ সাধারণত সার্ভিস ব্যবহার করা হয়। সার্ভিসের মাধ্যমে আপনি এক কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে ডেটা শেয়ার করতে পারেন।

সার্ভিস তৈরি:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private data = 'Shared data between components';

  getData() {
    return this.data;
  }

  setData(data: string) {
    this.data = data;
  }
}

প্যারেন্ট কম্পোনেন্ট (ParentComponent):

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-parent',
  template: `<p>{{ sharedData }}</p>`
})
export class ParentComponent {
  sharedData: string;

  constructor(private dataService: DataService) {
    this.sharedData = this.dataService.getData(); // সার্ভিস থেকে ডেটা নিয়ে আসা
  }
}

চাইল্ড কম্পোনেন্ট (ChildComponent):

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-child',
  template: `<button (click)="updateData()">Update Data</button>`
})
export class ChildComponent {

  constructor(private dataService: DataService) {}

  updateData() {
    this.dataService.setData('Updated data from Child Component'); // সার্ভিসে ডেটা আপডেট করা
  }
}

এখানে, প্যারেন্ট এবং চাইল্ড কম্পোনেন্ট একই সার্ভিস (DataService) ব্যবহার করে ডেটা শেয়ার করছে। চাইল্ড কম্পোনেন্টের মাধ্যমে সার্ভিসে ডেটা আপডেট করা হচ্ছে এবং প্যারেন্ট কম্পোনেন্ট সেই ডেটা গ্রহণ করছে।

৩. ভিউ চাইল্ড (ViewChild)

@ViewChild ডেকোরেটর ব্যবহার করে আপনি প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টের মেথড এবং প্রপার্টি অ্যাক্সেস করতে পারেন।

import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: `<app-child #child></app-child>
             <button (click)="accessChild()">Access Child</button>`
})
export class ParentComponent {
  @ViewChild('child') child: ChildComponent;

  accessChild() {
    this.child.childMethod(); // চাইল্ড কম্পোনেন্টের মেথড কল করা
  }
}

এখানে, প্যারেন্ট কম্পোনেন্ট @ViewChild দিয়ে চাইল্ড কম্পোনেন্টের মেথডকে অ্যাক্সেস করছে।

সারাংশ

Angular-এ কম্পোনেন্ট ইন্টারঅ্যাকশন করতে ইনপুট (Input) ও আউটপুট (Output) প্রপার্টি, সার্ভিস, এবং ভিউ চাইল্ড (ViewChild) ব্যবহার করা হয়। এই পদ্ধতিগুলির মাধ্যমে কম্পোনেন্টগুলির মধ্যে ডেটা এবং ইভেন্ট শেয়ার করা সম্ভব। Angular আপনাকে একাধিক উপায় প্রদান করে যাতে আপনি সহজেই কম্পোনেন্টের মধ্যে যোগাযোগ এবং ডেটা শেয়ারিং করতে পারেন।

Angular-এ Parent-Child কম্পোনেন্ট কমিউনিকেশন হল এমন একটি কৌশল, যেখানে প্যারেন্ট কম্পোনেন্ট (parent component) এবং চাইল্ড কম্পোনেন্ট (child component) একে অপরের সাথে ডেটা শেয়ার করে এবং একে অপরের সাথে যোগাযোগ স্থাপন করে। Angular-এ এই যোগাযোগ সাধারণত @Input() এবং @Output() ডেকোরেটর ব্যবহার করে করা হয়।

@Input() ডেকোরেটর

@Input() ডেকোরেটর প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা পাঠানোর জন্য ব্যবহৃত হয়। এর মাধ্যমে প্যারেন্ট কম্পোনেন্ট তার ভ্যালু বা ডেটা চাইল্ড কম্পোনেন্টে ইনপুট হিসেবে প্রদান করতে পারে।

উদাহরণ: @Input()

1. Parent Component: প্যারেন্ট কম্পোনেন্টে একটি ভ্যালু ডিফাইন করা হবে, যা চাইল্ড কম্পোনেন্টে পাঠানো হবে।

// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `<app-child [childData]="parentData"></app-child>`
})
export class ParentComponent {
  parentData = 'Hello from Parent!';
}

2. Child Component: চাইল্ড কম্পোনেন্টে @Input() ডেকোরেটর ব্যবহার করে ইনপুট ডেটা গ্রহণ করা হবে।

// child.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<p>{{ childData }}</p>`
})
export class ChildComponent {
  @Input() childData: string;  // প্যারেন্ট থেকে ডেটা ইনপুট হিসেবে গ্রহণ
}

এখানে, প্যারেন্ট কম্পোনেন্ট parentData ভ্যালুকে চাইল্ড কম্পোনেন্টে childData নামে পাঠাবে। চাইল্ড কম্পোনেন্ট এই ডেটা গ্রহণ করবে এবং তার টেমপ্লেটে প্রদর্শন করবে।

@Output() ডেকোরেটর

@Output() ডেকোরেটর চাইল্ড কম্পোনেন্ট থেকে প্যারেন্ট কম্পোনেন্টে ডেটা বা ইভেন্ট পাঠানোর জন্য ব্যবহৃত হয়। চাইল্ড কম্পোনেন্টে কোনো ইভেন্ট বা ফাংশন ট্রিগার হলে, সেটি প্যারেন্ট কম্পোনেন্টে পৌঁছানোর জন্য EventEmitter ব্যবহার করা হয়।

উদাহরণ: @Output()

1. Child Component: চাইল্ড কম্পোনেন্টে একটি ইভেন্ট তৈরি করা হবে এবং সেটি @Output() ডেকোরেটরের মাধ্যমে প্যারেন্ট কম্পোনেন্টে পাঠানো হবে।

// child.component.ts
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<button (click)="sendMessage()">Send Message</button>`
})
export class ChildComponent {
  @Output() messageEvent = new EventEmitter<string>();  // ইভেন্ট এমিটার

  sendMessage() {
    this.messageEvent.emit('Hello from Child!');  // প্যারেন্টে মেসেজ পাঠানো
  }
}

2. Parent Component: প্যারেন্ট কম্পোনেন্টে (messageEvent) নামক ইভেন্টটি হ্যান্ডেল করা হবে এবং চাইল্ড কম্পোনেন্টের মাধ্যমে পাঠানো মেসেজ গ্রহণ করা হবে।

// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `<app-child (messageEvent)="receiveMessage($event)"></app-child>
             <p>{{ message }}</p>`
})
export class ParentComponent {
  message: string = '';

  receiveMessage(event: string) {
    this.message = event;  // চাইল্ড কম্পোনেন্ট থেকে মেসেজ গ্রহণ
  }
}

এখানে, চাইল্ড কম্পোনেন্ট একটি বাটনে ক্লিক করার মাধ্যমে প্যারেন্ট কম্পোনেন্টে একটি মেসেজ পাঠাবে। প্যারেন্ট কম্পোনেন্টে receiveMessage() ফাংশন ব্যবহার করে সেই মেসেজ গ্রহণ করা হবে।

প্যারেন্ট এবং চাইল্ড কম্পোনেন্টের মধ্যে যোগাযোগের প্রক্রিয়া

1. @Input() ডেকোরেটরের মাধ্যমে প্যারেন্ট থেকে চাইল্ডে ডেটা পাঠানো হয়।
2. @Output() ডেকোরেটরের মাধ্যমে চাইল্ড থেকে প্যারেন্টে ডেটা বা ইভেন্ট পাঠানো হয়।

এই প্রক্রিয়া খুবই সাধারণ এবং অধিকাংশ Angular অ্যাপ্লিকেশনে ব্যবহৃত হয়, যেখানে কম্পোনেন্টের মধ্যে ডেটা শেয়ারিং বা ইভেন্ট কমিউনিকেশন প্রয়োজন।

উপসংহার

• @Input() এবং @Output() ডেকোরেটর ব্যবহার করে প্যারেন্ট-চাইল্ড কম্পোনেন্টের মধ্যে সহজভাবে ডেটা এবং ইভেন্ট শেয়ার করা যায়।
• @Input() প্যারেন্ট থেকে চাইল্ডে ডেটা পাঠায়, এবং @Output() চাইল্ড থেকে প্যারেন্টে ইভেন্ট পাঠায়।
• এই প্যাটার্নের মাধ্যমে Angular অ্যাপ্লিকেশনে ডেটা কমিউনিকেশন এবং কম্পোনেন্টের মধ্যে সম্পর্ক সহজভাবে স্থাপন করা সম্ভব।

Angular-এ ViewChild এবং ContentChild ডেকোরেটর দুটি ব্যবহৃত হয় ডম (DOM) উপাদান বা চাইল্ড কম্পোনেন্টগুলির সাথে ইন্টারঅ্যাক্ট করার জন্য। এগুলি Angular এর ডায়নামিক ভিউ ম্যানিপুলেশন করতে ব্যবহৃত হয়, যেখানে আপনি এক কম্পোনেন্টের মধ্যে অন্য কম্পোনেন্ট বা DOM এলিমেন্টকে রেফারেন্স করতে পারেন। যদিও তাদের উদ্দেশ্য এক, তবে তারা আলাদা আলাদা কনটেক্সটে ব্যবহৃত হয়।

১. ViewChild

ViewChild ডেকোরেটরটি DOM বা চাইল্ড কম্পোনেন্টের প্রথম ইন্সট্যান্সকে রেফারেন্স করতে ব্যবহৃত হয়, যা কেবলমাত্র ভিউ (template)-এর মধ্যে রয়েছে। ViewChild ব্যবহৃত হলে, Angular ওই কম্পোনেন্টের প্রথম ইন্সট্যান্সকে আপনার ক্লাসে ইনজেক্ট করে দেয়, যাতে আপনি এটি ব্যবহার করতে পারেন।

ব্যবহার:

• DOM এলিমেন্টের সাথে কাজ করার জন্য
• চাইল্ড কম্পোনেন্ট বা ডিরেক্টিভের সাথে কাজ করার জন্য
• কেবলমাত্র কম্পোনেন্টের ভিউতে (template) থাকা উপাদানগুলির সাথে কাজ করার জন্য

উদাহরণ: ViewChild ব্যবহার

ধরা যাক, আমাদের একটি ChildComponent রয়েছে, যা AppComponent থেকে রেফারেন্স করা হবে।

ChildComponent (child.component.ts)

import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  template: '<p>Child Component</p>',
})
export class ChildComponent {}

AppComponent (app.component.ts)

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-root',
  template: `
    <app-child></app-child>
  `,
})
export class AppComponent implements AfterViewInit {
  @ViewChild(ChildComponent) child: ChildComponent;

  ngAfterViewInit() {
    console.log(this.child);  // এখানে আপনি child কম্পোনেন্টের প্রপার্টি বা মেথড অ্যাক্সেস করতে পারবেন
  }
}

এখানে @ViewChild(ChildComponent) দ্বারা ChildComponent এর প্রথম ইনস্ট্যান্সকে child প্রপার্টি হিসেবে অ্যাক্সেস করা হচ্ছে। আপনি এটি ব্যবহার করে চাইল্ড কম্পোনেন্টের মেথড বা প্রপার্টি অ্যাক্সেস করতে পারবেন।

২. ContentChild

ContentChild ডেকোরেটরটি ব্যবহার করা হয় ng-content এলিমেন্টের মাধ্যমে প্রকৃত কন্টেন্ট (রিডেরেক্টেড কন্টেন্ট) থেকে উপাদান রেফারেন্স করার জন্য। এটি প্যারেন্ট কম্পোনেন্ট থেকে প্রাপ্ত কন্টেন্টের সাথে ইন্টারঅ্যাক্ট করতে ব্যবহৃত হয়। সাধারণত, ContentChild ng-content এর মধ্যে থাকা চাইল্ড কম্পোনেন্ট বা DOM এলিমেন্ট রেফারেন্স করতে ব্যবহৃত হয়।

ব্যবহার:

• ng-content এর মাধ্যমে ইনপুট ডেটা (content projection) পাওয়ার জন্য।
• প্যারেন্ট কম্পোনেন্টের কাছে আসা কন্টেন্টের সাথে কাজ করার জন্য।

উদাহরণ: ContentChild ব্যবহার

ধরা যাক, আমরা একটি ParentComponent এবং একটি ChildComponent তৈরি করেছি, যেখানে ChildComponent একটি ng-content এলিমেন্ট ব্যবহার করবে, এবং ParentComponent সেই কন্টেন্ট পাস করবে।

ChildComponent (child.component.ts)

import { Component, ContentChild, AfterContentInit } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<div><ng-content></ng-content></div>`,
})
export class ChildComponent implements AfterContentInit {
  @ContentChild('contentRef') content: any;

  ngAfterContentInit() {
    console.log(this.content);  // কন্টেন্টের রেফারেন্স এখানে পাওয়া যাবে
  }
}

ParentComponent (app.component.ts)

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <app-child>
      <div #contentRef>Content from Parent Component</div>
    </app-child>
  `,
})
export class AppComponent {}

এখানে, ContentChild('contentRef') ডেকোরেটর ব্যবহার করে আমরা ng-content এর মধ্যে থাকা কন্টেন্টের রেফারেন্স পেয়েছি। #contentRef এর মাধ্যমে আমরা ParentComponent থেকে একটি DOM এলিমেন্ট ChildComponent-এ পাস করছি, এবং ContentChild ডেকোরেটর সেই কন্টেন্ট অ্যাক্সেস করছে।

পার্থক্য: ViewChild এবং ContentChild

উপসংহার

• ViewChild ব্যবহৃত হয় ডায়নামিক ভিউ ম্যানিপুলেশন এবং ভিউ-এ থাকা উপাদান/কম্পোনেন্টের সাথে কাজ করার জন্য।
• ContentChild ব্যবহৃত হয় ng-content এর মাধ্যমে পাস হওয়া কন্টেন্টের সাথে কাজ করার জন্য। এটি সাধারণত প্যারেন্ট কম্পোনেন্ট থেকে ইনপুট কন্টেন্ট রেফারেন্স করার জন্য ব্যবহৃত হয়।

এই দুটি ডেকোরেটর আপনাকে Angular অ্যাপ্লিকেশনে আরও ডায়নামিক এবং মডুলার কাজ করতে সহায়তা করে।

Angular অ্যাপ্লিকেশনে সার্ভিস-ভিত্তিক কমিউনিকেশন একটি সাধারণ প্যাটার্ন যা বিভিন্ন কম্পোনেন্টের মধ্যে ডেটা বা তথ্য শেয়ার করতে ব্যবহৃত হয়। এই প্যাটার্নে সার্ভিসগুলোকে ডেটা শেয়ারিং, ব্যবসায়িক লজিক এবং অ্যাপ্লিকেশন স্টেট ম্যানেজমেন্ট এর জন্য ব্যবহৃত হয়। Angular-এর সার্ভিসগুলি সাধারণত Single Responsibility Principle অনুসরণ করে এবং কম্পোনেন্টের থেকে আলাদা হয়ে তাদের নিজস্ব ফাংশনালিটি পরিচালনা করে।

সার্ভিস-ভিত্তিক কমিউনিকেশন মূলত Angular অ্যাপ্লিকেশনের মধ্যে কম্পোনেন্ট-কম্পোনেন্ট কমিউনিকেশন বা ডেটা শেয়ারিং পরিচালনা করতে ব্যবহৃত হয়, যা একটি পরিষ্কার, কার্যকরী এবং মেইনটেইনযোগ্য আর্কিটেকচার গঠন করতে সাহায্য করে।

সার্ভিস তৈরি করা

Angular-এ সার্ভিস তৈরি করতে @Injectable() ডেকোরেটর ব্যবহার করা হয়। এটি নির্দেশ করে যে সার্ভিসটি Dependency Injection সিস্টেমের মাধ্যমে অন্য কম্পোনেন্ট বা সার্ভিসে ইনজেক্ট করা যাবে।

সার্ভিস উদাহরণ:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'  // সার্ভিসটি অ্যাপ্লিকেশন সারা জুড়ে উপলব্ধ হবে
})
export class DataService {
  constructor(private http: HttpClient) {}

  // API থেকে ডেটা ফেচ করা
  fetchData(): Observable<any> {
    return this.http.get('https://api.example.com/data');
  }
}

এখানে, DataService একটি সার্ভিস যা HTTP ক্লায়েন্ট ব্যবহার করে সার্ভার থেকে ডেটা ফেচ করার জন্য তৈরি করা হয়েছে। @Injectable() ডেকোরেটরের মাধ্যমে সার্ভিসটি root লেভেলে প্রদান করা হয়েছে, যার মানে হলো এটি অ্যাপ্লিকেশনটির সমস্ত কম্পোনেন্টে পাওয়া যাবে।

সার্ভিস ইনজেকশন

একটি কম্পোনেন্টে সার্ভিস ইনজেক্ট করতে constructor() মেথডের মাধ্যমে সার্ভিসটি ইনজেক্ট করা হয়। Angular-এর Dependency Injection (DI) সিস্টেম সার্ভিসকে স্বয়ংক্রিয়ভাবে ইনজেক্ট করে।

উদাহরণ: সার্ভিস ইনজেক্ট করা

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';  // DataService ইম্পোর্ট করা

@Component({
  selector: 'app-data-display',
  templateUrl: './data-display.component.html',
})
export class DataDisplayComponent implements OnInit {
  data: any;

  constructor(private dataService: DataService) {}  // DataService ইনজেক্ট করা

  ngOnInit() {
    this.dataService.fetchData().subscribe(response => {
      this.data = response;
      console.log(this.data);
    });
  }
}

এখানে, DataDisplayComponent কম্পোনেন্টে DataService ইনজেক্ট করা হয়েছে, এবং কম্পোনেন্টের ngOnInit() মেথডে fetchData() মেথড কল করা হয়েছে, যাতে অ্যাসিঙ্ক্রোনাসভাবে ডেটা ফেচ করা যায়।

কম্পোনেন্ট-কম্পোনেন্ট কমিউনিকেশন

একটি সার্ভিসের মাধ্যমে দুই বা তার বেশি কম্পোনেন্টের মধ্যে ডেটা শেয়ার করা যায়। এটি দুইটি উপায়ে করা যায়:

1. শেয়ারড সার্ভিসের মাধ্যমে ডেটা শেয়ার করা: এক কম্পোনেন্টে ডেটা আপডেট করলে অন্য কম্পোনেন্টগুলো সেটি দেখতে পায়।
2. Subject/BehaviorSubject ব্যবহার করে রিয়্যাক্টিভ ডেটা শেয়ার করা: Subject বা BehaviorSubject ব্যবহার করে কম্পোনেন্টগুলোর মধ্যে ডেটা বা ইভেন্ট শেয়ার করা যায়, যা RxJS স্ট্রিমের মাধ্যমে কাজ করে।

উদাহরণ: Subject এর মাধ্যমে ডেটা শেয়ার করা

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CommunicationService {
  private messageSource = new BehaviorSubject<string>('Initial message');
  currentMessage = this.messageSource.asObservable();

  changeMessage(message: string) {
    this.messageSource.next(message);
  }
}

এখানে, BehaviorSubject ব্যবহার করে একটি সার্ভিস তৈরি করা হয়েছে, যা একটি message স্টোর করে এবং অন্য কম্পোনেন্টে ডেটা পাঠায় যখন সেটি পরিবর্তিত হয়।

কম্পোনেন্ট ১: মেসেজ আপডেট করা

import { Component } from '@angular/core';
import { CommunicationService } from './communication.service';

@Component({
  selector: 'app-message-sender',
  template: `<button (click)="newMessage()">Change Message</button>`
})
export class MessageSenderComponent {

  constructor(private communicationService: CommunicationService) {}

  newMessage() {
    this.communicationService.changeMessage('Hello from Sender!');
  }
}

কম্পোনেন্ট ২: মেসেজ গ্রহণ করা

import { Component, OnInit } from '@angular/core';
import { CommunicationService } from './communication.service';

@Component({
  selector: 'app-message-receiver',
  template: `<p>{{message}}</p>`
})
export class MessageReceiverComponent implements OnInit {
  message: string;

  constructor(private communicationService: CommunicationService) {}

  ngOnInit() {
    this.communicationService.currentMessage.subscribe(msg => {
      this.message = msg;
    });
  }
}

এখানে, MessageSenderComponent যখন একটি নতুন মেসেজ পাঠায়, তখন MessageReceiverComponent সেটি গ্রহণ করে এবং UI-তে রেন্ডার করে।

সার্ভিসের অন্যান্য ব্যবহার

• অ্যাপ্লিকেশন স্টেট ম্যানেজমেন্ট: সার্ভিস ব্যবহার করে অ্যাপ্লিকেশন স্টেট সংরক্ষণ করা যায়, যেমন লগইন স্টেট, ইউজার তথ্য ইত্যাদি।
• অথেনটিকেশন ও অথরাইজেশন: সার্ভিস ব্যবহার করে লগইন তথ্য ম্যানেজ করা এবং প্রিভিলেজ-ভিত্তিক অ্যাক্সেস কন্ট্রোল তৈরি করা যায়।
• এপিআই কল ম্যানেজমেন্ট: HTTP সার্ভিস ব্যবহার করে API কল পরিচালনা করা এবং সার্ভার থেকে ডেটা ফেচ করা।

সার্ভিস-ভিত্তিক কমিউনিকেশন এর সুবিধা

• ডাটা শেয়ারিং সহজ: একাধিক কম্পোনেন্টের মধ্যে সার্ভিস ব্যবহার করে সহজে ডেটা শেয়ার করা যায়।
• কোড পুনঃব্যবহারযোগ্যতা: সার্ভিসগুলো একই ডেটা বা লজিক একাধিক কম্পোনেন্টে ব্যবহার করা যায়।
• আন্তঃকম্পোনেন্ট যোগাযোগের সহজ উপায়: কম্পোনেন্টগুলোর মধ্যে স্টেট এবং ডেটা ম্যানেজমেন্ট করা সহজ হয়।
• রিয়্যাক্টিভ ডেটা স্ট্রীম: RxJS এবং BehaviorSubject ব্যবহার করে ডেটা পরিবর্তন হলে তা স্বয়ংক্রিয়ভাবে কম্পোনেন্টে আপডেট হয়।

সার্ভিস-ভিত্তিক কমিউনিকেশন Angular অ্যাপ্লিকেশনগুলোকে আরও মডুলার, স্কেলেবেল এবং মেইনটেইনেবল করে তোলে, যা বড় অ্যাপ্লিকেশনগুলোর জন্য অপরিহার্য।

EventEmitter হলো Angular এর একটি বিল্ট-ইন ক্লাস যা কম্পোনেন্টের মধ্যে ইভেন্ট সিগন্যাল পাঠাতে ব্যবহৃত হয়। এটি সাধারণত child component থেকে parent component-এ ডেটা বা ইভেন্ট পাঠানোর জন্য ব্যবহৃত হয়। EventEmitter Angular এর ডেক্লেয়ারড ইভেন্টগুলির মধ্যে একটি এবং এটি @Output ডেকোরেটরের সাথে ব্যবহৃত হয়।

EventEmitter কী?

EventEmitter একটি ক্লাস যা ইভেন্ট তৈরি করতে এবং সেই ইভেন্টের মাধ্যমে প্যারেন্ট কম্পোনেন্টে সিগন্যাল পাঠাতে সাহায্য করে। এটি মূলত Observable এর একটি বিশেষ ধরনের ক্লাস, যা Angular RxJS এর ওপর ভিত্তি করে কাজ করে। EventEmitter এর মাধ্যমে শিশু কম্পোনেন্ট (child component) প্যারেন্ট কম্পোনেন্টে ইভেন্ট পাঠাতে পারে এবং প্যারেন্ট কম্পোনেন্ট সেই ইভেন্ট গ্রহণ করতে পারে।

EventEmitter ব্যবহার করার উদাহরণ

1. Child Component (ইভেন্ট পাঠানোর জন্য)

প্রথমে, আমরা একটি child কম্পোনেন্ট তৈরি করব, যা প্যারেন্ট কম্পোনেন্টে একটি ইভেন্ট পাঠাবে।

1. child.component.ts ফাইল:

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  @Output() notify = new EventEmitter<string>();  // EventEmitter তৈরি

  sendMessage() {
    this.notify.emit('Hello from child component!');  // ইভেন্ট পাঠানো
  }
}

এখানে:

• @Output() ডেকোরেটর ব্যবহার করা হয়েছে EventEmitter কে প্যারেন্ট কম্পোনেন্টে ইভেন্ট পাঠানোর জন্য।
• notify.emit() মেথডটি প্যারেন্ট কম্পোনেন্টে সিগন্যাল পাঠাতে ব্যবহার করা হয়।

2. child.component.html ফাইল:

<button (click)="sendMessage()">Send Message to Parent</button>

এখানে, click ইভেন্টে sendMessage() মেথডটি কল হচ্ছে, যা EventEmitter এর মাধ্যমে প্যারেন্ট কম্পোনেন্টে একটি মেসেজ পাঠাবে।

2. Parent Component (ইভেন্ট গ্রহণ করার জন্য)

এবার, আমরা প্যারেন্ট কম্পোনেন্টে ইভেন্টটি গ্রহণ করব এবং সেটি কিভাবে হ্যান্ডেল করতে হয় তা দেখব।

1. parent.component.ts ফাইল:

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {

  receivedMessage: string;

  onNotify(message: string) {
    this.receivedMessage = message;  // প্যারেন্ট কম্পোনেন্টে ইভেন্ট গ্রহণ
  }
}

এখানে:

• onNotify() মেথডটি প্যারেন্ট কম্পোনেন্টে ইভেন্ট গ্রহণ করার জন্য ব্যবহার করা হয়।
• message: string আর্গুমেন্টের মাধ্যমে child কম্পোনেন্ট থেকে পাঠানো মেসেজ গ্রহণ করা হয়।

2. parent.component.html ফাইল:

<app-child (notify)="onNotify($event)"></app-child>  <!-- ইভেন্ট শুনতে প্যারেন্ট কম্পোনেন্টে -->
<p>Message from child: {{ receivedMessage }}</p>

এখানে:

• notify ইভেন্টটি child কম্পোনেন্ট থেকে প্যারেন্ট কম্পোনেন্টে পাঠানো হচ্ছে। onNotify($event) কল করা হচ্ছে ইভেন্ট গ্রহণ করতে এবং message গ্রহণ করে receivedMessage তে সেট করা হচ্ছে।

EventEmitter এর সাথে অন্য ব্যবহার

EventEmitter শুধুমাত্র ডেটা পাঠানোর জন্যই নয়, ইভেন্টের মাধ্যমে অ্যাকশনও ট্রিগার করতে ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, ফর্ম সাবমিশন বা ডেটা লোডিং কনফিগারেশনের ক্ষেত্রে ইভেন্ট পাঠানো এবং গ্রহণ করা সম্ভব।

EventEmitter এর মাধ্যমে Angular কম্পোনেন্টের মধ্যে ইভেন্ট পাঠানো এবং গ্রহণ করা খুবই সহজ। এটি কম্পোনেন্টের মধ্যে ডেটা যোগাযোগের একটি শক্তিশালী পদ্ধতি, যা অ্যাপ্লিকেশনের ইন্টারঅ্যাকটিভিটি এবং কম্পোনেন্টের মধ্যে যোগাযোগের সক্ষমতা বৃদ্ধি করে।